<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'

const router = useRouter()

const form = ref({
  oldPassword: '',
  newPassword: '',
  confirmPassword: ''
})

// 模拟存储的正确密码（实际应用中应从后端获取）
const correctPassword = 'correctPassword123'

const rules = ref({
  oldPassword: [
    { required: true, message: '请输入原密码', trigger: 'blur' },
    {
      validator: (rule, value, callback) => {
        // 实际应用中这里应该调用API验证原密码
        if (value !== correctPassword) {
          callback(new Error('原密码输入错误'))
        } else {
          callback()
        }
      },
      trigger: 'blur'
    }
  ],
  newPassword: [
    { required: true, message: '请输入新密码', trigger: 'blur' },
    { min: 6, max: 20, message: '密码长度在6到20个字符', trigger: 'blur' }
  ],
  confirmPassword: [
    { required: true, message: '请再次输入新密码', trigger: 'blur' },
    {
      validator: (rule, value, callback) => {
        if (value !== form.value.newPassword) {
          callback(new Error('两次输入密码不一致!'))
        } else {
          callback()
        }
      },
      trigger: 'blur'
    }
  ]
})

const handleResetPassword = () => {
  // 这里添加重置密码的逻辑
  ElMessage.success('密码重置成功')
  // 模拟重置后更新正确密码（实际应用中应该调用API）
  let correctPassword = form.value.newPassword
  router.push('/') // 假设重置成功后跳转到首页
}
</script>

<template>
  <div class="reset-password-container">
    <el-card class="reset-password-card">
      <h1 class="title">重置密码</h1>

      <el-form
          :model="form"
          :rules="rules"
          ref="resetForm"
          label-position="top"
          class="reset-form"
      >
        <el-form-item label="原密码" prop="oldPassword">
          <el-input
              v-model="form.oldPassword"
              type="password"
              placeholder="请输入原密码"
              show-password
          />
        </el-form-item>

        <el-form-item label="新密码" prop="newPassword">
          <el-input
              v-model="form.newPassword"
              type="password"
              placeholder="请输入新密码"
              show-password
          />
        </el-form-item>

        <el-form-item label="确认新密码" prop="confirmPassword">
          <el-input
              v-model="form.confirmPassword"
              type="password"
              placeholder="请再次输入新密码"
              show-password
          />
        </el-form-item>

        <el-form-item>
          <el-button
              type="primary"
              @click="handleResetPassword"
              style="width: 100%; margin-top: 10px;"
          >
            重置密码
          </el-button>
        </el-form-item>
      </el-form>

      <div class="footer-links">
        <router-link to="/">返回首页</router-link>
      </div>
    </el-card>
  </div>
</template>

<style scoped lang="scss">
.reset-password-container {
  display: flex;
  justify-content: center;
  align-items: flex-start; /* 改为flex-start使内容向上对齐 */
  min-height: 100vh;
  background-color: #f5f7fa;
  padding: 20px;
  padding-top: 60px; /* 减少顶部内边距 */
}

.reset-password-card {
  width: 100%;
  max-width: 500px;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  margin-top: 0; /* 移除默认的margin-top */

  .title {
    text-align: center;
    margin-bottom: 20px; /* 减少标题下边距 */
    color: #303133;
    padding-top: 10px; /* 标题顶部内边距 */
  }
}

.reset-form {
  margin-top: 10px; /* 减少表单上边距 */
}

.footer-links {
  margin-top: 12px; /* 减少底部链接上边距 */
  text-align: center;
  padding-bottom: 15px; /* 底部内边距 */

  a {
    color: #409eff;
    text-decoration: none;
    font-size: 14px;

    &:hover {
      text-decoration: underline;
    }
  }
}
</style>